<template>
    <div class="d-flex justify-content-center">
        <div :style="{ backgroundColor: props.cardBgColor, width: breadcrumbWidth }">
            <!-- 面包屑 -->
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item v-for="item in breadcrumbList" :to="{ path: item.path }" :key="'breadcrumb_' + item.path">
                    {{ item.meta.title }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
    import { ArrowRight } from '@element-plus/icons-vue'
    import { computed } from 'vue'
    import { useRouter } from "vue-router";

    const router = useRouter();

    const props = defineProps({
        cardBgColor: {
            type: String,
            default: '#FFFFFF'
        },
        width: {
            type:String,
            default: '70%'
        }
    })

    const breadcrumbList = computed(() => {
        return router.currentRoute.value.matched
    })

    const breadcrumbWidth = computed(() => {
        return '/bi_frontend/portrait/customer/detail' == router.currentRoute.value.href ? '100%' : props.width;
    })
</script>
  
<style scoped>
body {
    background: #fff;
}
</style>